<template>
  <div class="forGetDialog">
    <van-field v-model="form.email" :border="false" input-align="right" :label="t('Email')" type="text" :placeholder="t('Email')"
      clearable />

    <van-field v-model="form.password" :border="false" input-align="right" :label="t('New Password')" type="password"
      :placeholder="t('New Password')" clearable />

    <van-field v-model="form.code" :border="false" input-align="right" :label="t('Verification Code')" type="text"
      :placeholder="t('Verification Code')">
      <template #button>
        <span class="send" @click="handleSend">{{ btnTxt }}</span>
        <!-- <img :src='captcha' style="width: 2rem" @click="getCaptcha"/> -->
      </template>
    </van-field>
    <van-button class="btns" round @click="handleSubmit">{{t('Submit')}}</van-button>
  </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { showToast, showLoadingToast, showSuccessToast } from 'vant'
import { post, get } from '@/utils/request'
import { t } from '@/languages'
const form = reactive({
  email: '',
  password: '',
  code: ''
})
const captcha = ref('')
const emit = defineEmits(['close'])
const btnTxt = ref(t('Send'))
function handleSend() {
  if (!form.Email) {
    return showToast(t('Email Cannot be empty'))
  }

  let num = 60
  num--
  btnTxt.value = `${num}s`
  const timer = setInterval(() => {
    num--
    btnTxt.value = `${num}s`

    if (num === 0) {
      num = 60
      btnTxt.value = t('Send')
      clearInterval(timer)
    }
  }, 1000)
}

// async function getCaptcha () {
//   const res = await get('/api/captcha/', {
//     ts: Date.now()
//   })
//   captcha.value = res.data.image_base
// }
// getCaptcha()
async function handleSubmit() {
  if (!form.email || !form.password || !form.code) {
    let msg = ''
    !form.email && (msg = t('Email cannot be empty'))
    !form.password && !msg && (msg = t('Password cannot be empty'))
    !form.code && !msg && (msg = t('Code cannot be empty'))
    return showToast(msg)
  }
  try {
    showLoadingToast({
      duration: 0
    })
    const res = await post('/api/app/resetpassword/', { email: form.email, password: form.password, code: form.code })
    showSuccessToast(t('Reset success'))
    form.email = ''
    form.password = ''
    form.code = ''
    emit('close')
  } catch (error) {
    console.log(error)
  }

}
</script>
<style lang="scss" scoped>
.forGetDialog {
  padding: .26667rem;

  :deep(.van-field__label) {
    word-break: auto-phrase;
  }

  :deep(.van-field__control) {
    color: #323233 !important;
    @include setPlaceholder(#ccc);
  }
}

.btns {
  display: block;
  width: 100%;
  color: white;
  background: linear-gradient(90deg, rgb(75, 157, 214), rgb(47, 56, 213));
  border: 0px;
  margin-top: .26667rem;
}

.forGetDialog .send {
  color: #325d79;
}
</style>
